import { defineComponent } from "vue";
import classes from "./index.module.less";
import { routeChildren } from "@/router";
import { RouterLink } from "vue-router";
const SideNav = defineComponent({
  name: "SideNav",
  setup() {
    return () => (
      <div class={classes.wrap}>
        <div class={classes.side}>
          {routeChildren.map((t) => {
            if (t.children) {
              return (
                <>
                  <div class="h-8 px-4 flex items-center">
                    {t.title || t.path}
                  </div>
                  <div class="pl-4">
                    {t.children.map((t2) => (
                      <RouterLink
                        to={`/${t.path}/${t2.path}`}
                        exactActiveClass="text-blue-500"
                        class="h-8 px-4 flex items-center hover:text-blue-500"
                        key={t2.path}
                      >
                        {t2.path}
                      </RouterLink>
                    ))}
                  </div>
                </>
              );
            }
            return (
              <RouterLink
                to={"/" + t.path}
                exactActiveClass="text-blue-500"
                class="h-8 px-4 flex items-center hover:text-blue-500"
                key={t.path}
              >
                {t.title || t.path}
              </RouterLink>
            );
          })}
        </div>
      </div>
    );
  },
});

export default SideNav;
